<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<!-- RichFaces tag library declaration -->
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

<html>
    <head>

	<title>Motorbike tour organizing system | Upload picture</title>
	<style type="text/css">
	.label{
	font-weight:bold;
	}
	</style>

        <style type="text/css">
        <c:import url="styles/decoration.css" />
        </style>

    </head>

    <body>

	<f:view>
    	    <f:subview id="headline">
		<c:import url="header.jsp"/>
	    </f:subview>

	    <rich:panel>
		<f:facet name="header">
		    <h:outputText value="Image upload"/>
		</f:facet>

		<h:form>
		    <rich:fileUpload fileUploadListener="#{imageUpload.onImageUpload}" acceptedTypes="jpg,jpeg,png" maxFilesQuantity="5">
			<a4j:support event="onuploadcomplete" reRender="info"/>
		    </rich:fileUpload>
		

		    <rich:panel id="info">
			<f:facet name="header">
			    <h:outputText value="Uploaded files"/>
			</f:facet>
			
			<rich:dataGrid columns="1" var="img" value="#{imageUpload.newImages}" rowKeyVar="row">
			    <rich:panel>
				<f:facet name="header">
				    <h:outputText value="Image #{row + 1}"/>
				</f:facet>


				<h:panelGrid columns="1">
				    <h:graphicImage url="/img?imgId=#{img.id}"/>

				    <h:message for="titleIn"/>
				    <h:panelGrid columns="2">
					<h:outputText value="Title:"/>
					<h:inputText id="titleIn" value="#{img.title}" requiredMessage="Please specify the title!" required="true"/>
				    </h:panelGrid>
				</h:panelGrid>
			    </rich:panel>
			</rich:dataGrid>

			<h:commandButton value="Save" action="#{imageUpload.onSave}">
			    <f:setPropertyActionListener target="#{tripDetails.trip}" value="#{imageUpload.trip}"/>
			</h:commandButton>
		    </rich:panel>
		</h:form>
	    </rich:panel>
	</f:view>
    </body>
</html>

